var ChangeOrderTemplate = function () {
  var template = /* html */ `
    <div class="change-order-template" v-loading.fullscreen.lock="loading">
      <el-form inline size="medium">
        <el-form-item label="模板名称">
          <el-input v-model="search.tempName" style="width:180px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchData">查询</el-button>
          <el-button type="primary" @click="ensure">
            <span v-if="type==='create'">载入模板</span>
            <span v-else>切换模板</span>
          </el-button>
        </el-form-item>
      </el-form>

      <div class="change-order-template-table-div">
        <el-table fit stripe border highlight-current-row :data="templateList" style="width: 100%" height="parent" @current-change="currentChange">
          <el-table-column label="模版名称" prop="id" min-width="140px" header-align="center">
            <template slot-scope="scope">
              <span>{{scope.row.id}} {{scope.row.temp_name}}</span>
            </template>
          </el-table-column>
          <el-table-column label="模版类型" prop="type" min-width="120px" align="center">
            <template slot-scope="scope">
              <span>{{i18n.getMsg('produceOrder.type.'+scope.row.type)}}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="status" width="100px" align="center">
            <template slot-scope="scope">
              <span>{{i18n.getMsg('produceOrder.status.'+scope.row.status)}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div style="margin-top:5px;text-align:right" v-if="pagination.totalCount!==0">
        <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount" :current-page.sync="pagination.currentPage"
          @current-change="pageChange"></el-pagination>
      </div>
    </div>
  `;

  return {
    props: {
      type: {
        type: String,
        default: 'create'
      }
    },

    data: function () {
      var search = {
        tempName: ''
      };
      return {
        loading: false,
        templateList: [],
        search: search,
        selectTemplate: null,
        pagination: {
          currentPage: 1,
          totalCount: 0,
          pageSize: 15
        }
      };
    },

    created: function () {
      this.setTemplateList(true);
    },

    methods: {
      setTemplateList: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;
        var postData = {
          start: start,
          length: pageSize,
          status: 1,
          type: 1,
          isBusinessTemplate: true
        };
        var search = this.search;
        var tempName = search.tempName;
        if (tempName !== '') {
          postData.temp_name = tempName;
        }

        this.loading = true;
        var self = this;
        ajaxRequest('createOrder/getTemplateList', postData, false).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          var templateList = res.returnData;
          self.templateList = templateList;
          self.pagination.totalCount = res.iTotalRecords;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.setTemplateList(true);
      },

      pageChange: function () {
        this.setTemplateList();
      },

      currentChange: function (template) {
        this.selectTemplate = template;
      },

      ensure: function () {
        var template = this.selectTemplate;
        var type = this.type;
        if (template === null) {
          var msg = type === 'create' ? '请选择需要载入的模板' : '请选择需要切换的模板';
          this.$alert(msg, '信息');
          return;
        }

        this.$emit('ensure', template.id, type);
      }
    },

    template: template
  };
}();
